import { Form, Button, Input, Row, Col, Radio, DatePicker, InputNumber, Divider, Card } from 'antd';
import React, { Component } from 'react';
import { FormComponentProps } from 'antd/es/form';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

// @ts-ignore
// eslint-disable-next-line import/no-unresolved
import { FormItem } from '../data.d';

// eslint-disable-next-line no-redeclare
const FormItem = Form.Item;

export interface UpdateFormProps extends FormComponentProps {
  handleUpdateModalVisible: (flag?: boolean, formVals?: FormItem) => void;
  handleSave: (values: FormItem) => void;
  data: Partial<FormItem>;
  disabled: boolean;
  loading: boolean;
  showDetail: boolean;
}

@connect(
  ({
    loading,
  }: {
    loading: {
      models: {
        [key: string]: boolean;
      };
    };
  }) => ({
    loading: loading.models.policyInsurance,
  }),
)
class PolicyInsuranceForm extends Component<UpdateFormProps> {
  // eslint-disable-next-line no-useless-constructor
  constructor(props: any) {
    super(props);
  }

  handleResetFields = () => {
    this.props.form.resetFields();
    // this.props.handleUpdateModalVisible(false);

    // @ts-ignore
    const { dispatch } = this.props;
    dispatch({
      type: 'insurance/refreshState',
      payload: {
        modalVisible: false,
      },
    });
  };

  getForm = () => {
    const { form, handleSave } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const formVals = { ...fieldsValue };
      handleSave(formVals);
    });
  };

  calculateInsuredAmount = (type?: string, value?: number) => {
    const { getFieldValue, setFieldsValue } = this.props.form;
    let amount = type === 'amount' ? value : getFieldValue('amount');
    let adding = type === 'adding' ? value : getFieldValue('adding');
    amount = amount || 0;
    adding = adding || 0;
    const insuredAmount = (amount * (1 + adding)).toFixed(4);
    setFieldsValue({ insuredAmount });
    const rate = getFieldValue('rate');
    this.calculatePremium(rate);
  }

  calculatePremium = (value?: number) => {
    const { getFieldValue, setFieldsValue } = this.props.form;
    const insuredAmount = getFieldValue('insuredAmount') ? getFieldValue('insuredAmount') : 0;
    const rate = value || 0;
    let premium = (insuredAmount * rate).toFixed(4) || 0;
    premium = premium < 100 ? 100 : premium;
    setFieldsValue({ premium });
  }

  render() {
    const {
      form: { getFieldDecorator },
      disabled,
      loading,
    } = this.props;

    return (
      <PageHeaderWrapper content={
        <div>
          <div style={{ marginTop: 10 }}>
            <div>
              <b>产品说明</b><br />
              1、投保货运险需要您填写如下保单信息；<br />
              2、保单受益人请反复核对，我们将根据您填写的信息为您投保。
            </div>
            <br />
            <div>
              <b>投保说明</b><br />
              1、填写投保单后，不可取消。<br />
              2、裸装金属和设备自动剔除刮擦，锈损，凹瘪责任。<br />
              3、电子保单和纸质保单效率一样，尽量使用电子保单。<br />
              4、如果是非集装箱船一定要备注非集装箱，散货船/整船运输的请注明船龄，货物放在舱内还是舱面。<br />
              5、有特殊要求，请在投保前联系在线客服确认是否能操作；如保单号生成后提出无法满足的特殊要求，不予办理，且需承担全额保费。<br />
              6、常见无法满足的特殊要求，如：保单上显示保险费金额。
            </div>
            <br />
            <div>
              <b>投保说明</b><br />
              (如果做信用证注明信用证对保险条款的要求),如果没有特殊注明，则默认为一切险。
            </div>
          </div>
        </div>
      }>
        <Card bordered={false}>
          <div>
            <Form style={{ marginTop: 8 }}>
              <div><b>本投保单由投保人如实填写并签章后作为向本公司投保货物运输保险的依据, 本投保单为该货物运输保险单的组成部分。</b></div>
              {/* eslint-disable-next-line max-len */}
              <div><b>The Applicant is required to fill in the following items in good faith and as detailed as possible, and affix signature to this application, which shall be treated as proof of application to the Company for cargo transportation insurance and constitute an integral part of the insurance policy covering cargo.</b></div>
              <Row gutter={24}>
                <Col span={24}>
                  <FormItem label={<span>被保险人(Insured)</span>}>
                    {getFieldDecorator('receiver', {
                      rules: [{ required: true, message: '请填写被保险人' }],
                      initialValue: '',
                    })(<Input maxLength={100} placeholder="请填写发货人或收货人" disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <div><b>兹拟向中国平安财产保险股份有限公司投保下列货物运输保</b></div>
              {/* eslint-disable-next-line max-len */}
              <div><b>Herein apply to the Company for Transportation Insurance of following cargo</b></div>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>品名</span>}>
                    {getFieldDecorator('productName', {
                      rules: [{ required: true, message: '请填写品名' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>件数</span>}>
                    {getFieldDecorator('packNum', {
                      rules: [{ required: true, message: '请填写件数' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>唛头</span>}>
                    {getFieldDecorator('shippingMark', {
                      rules: [{ required: true, message: '请填写唛头' }],
                      initialValue: '',
                    })(<Input maxLength={500} disabled={disabled} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>集装箱号(整柜/拼箱建议填上)</span>}>
                    {getFieldDecorator('containerNo', {
                      rules: [{ required: true, message: '请填写集装箱号' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>投保险别(CONDITIONS)</span>}>
                    {getFieldDecorator('conditions', {
                      rules: [{ required: true, message: '请填写投保险别' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>装载运输工具(船名航次-航班航次 Per Conveyance S.S.)</span>}>
                    {getFieldDecorator('transportTools', {
                      rules: [{ required: true, message: '请填写装载运输工具' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={8}>
                  <FormItem label={<span>集装箱运输(Container Load)</span>}>
                    {getFieldDecorator('containTransport', {
                      rules: [{ required: true, message: '请选择集装箱运输' }],
                      initialValue: '',
                    })(
                      <Radio.Group disabled={disabled}>
                        <Radio value="1">是</Radio>
                        <Radio value="0">否</Radio>
                      </Radio.Group>)}
                  </FormItem>
                </Col>
                <Col xs={24} md={8}>
                  <FormItem label={<span>整船运输(Full Vessel Charter)</span>}>
                    {getFieldDecorator('shipTransport', {
                      rules: [{ required: true, message: '请选择整船运输' }],
                      initialValue: '',
                    })(
                      <Radio.Group disabled={disabled}>
                        <Radio value="1">是</Radio>
                        <Radio value="0">否</Radio>
                      </Radio.Group>)}
                  </FormItem>
                </Col>
                <Col xs={24} md={8}>
                  <FormItem label={<span>出单方式</span>}>
                    {getFieldDecorator('billType', {
                      rules: [{ required: true, message: '请选择出单方式' }],
                      initialValue: '',
                    })(
                      <Radio.Group disabled={disabled}>
                        <Radio value="1">正本保单</Radio>
                        <Radio value="0">电子保单</Radio>
                      </Radio.Group>)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>发票号或提单号(Invoice No. or B/L No.)</span>}>
                    {getFieldDecorator('invoiceNo', {
                      rules: [{ required: true, message: '请填写发票号或提单号' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>起运日期(Slg. on or abt.)</span>}>
                    {getFieldDecorator('slgDate', {
                      rules: [{ required: true, message: '请填写起运日期' }],
                      initialValue: undefined,
                    })(<DatePicker style={{ width: '100%' }} disabled={disabled}/>)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={8}>
                  <FormItem label={<span>自(起运地-From)</span>}>
                    {getFieldDecorator('start', {
                      rules: [{ required: true, message: '请填写起运地' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={8}>
                  <FormItem label={<span>经(转运地-Via)</span>}>
                    {getFieldDecorator('via', {
                      rules: [{ required: true, message: '请填写转运地' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={8}>
                  <FormItem label={<span>至(目的地-To)</span>}>
                    {getFieldDecorator('end', {
                      rules: [{ required: true, message: '请填写目的地' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>发票金额(Amount Invoice)</span>}>
                    {getFieldDecorator('amount', {
                      rules: [{ required: true, message: '请填写发票金额' }],
                      initialValue: '',
                      // eslint-disable-next-line react/jsx-no-bind
                    })(<InputNumber min={0} max={99999999999999} disabled={disabled} style={{ width: '100%' }} onChange={this.calculateInsuredAmount.bind(this, 'amount')} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>加成(Adding)</span>}>
                    {getFieldDecorator('adding', {
                      rules: [{ required: true, message: '请填写加成' }],
                      initialValue: '',
                      // eslint-disable-next-line react/jsx-no-bind
                    })(<InputNumber min={0} max={0.1} precision={1} disabled={disabled} style={{ width: '100%' }} placeholder="0或者0.1" onChange={this.calculateInsuredAmount.bind(this, 'adding')} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>保险金额(Amount Insured)</span>}>
                    {getFieldDecorator('insuredAmount', {
                      rules: [{ required: true, message: '请填写保险金额' }],
                      initialValue: '',
                    })(<InputNumber min={0} max={99999999999999} disabled style={{ width: '100%' }} placeholder="保险金额=发票金额*(1+加成)" />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>赔款偿付地点(Claim payable at)</span>}>
                    {getFieldDecorator('claimPayable', {
                      rules: [{ required: true, message: '请填写赔款偿付地点' }],
                      initialValue: '',
                    })(<Input disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>费率(Rate)</span>}>
                    {getFieldDecorator('rate', {
                      rules: [{ required: true, message: '请填写费率' }],
                      initialValue: '',
                      // eslint-disable-next-line react/jsx-no-bind
                    })(<InputNumber min={0} max={99999999999999} disabled={disabled} style={{ width: '100%' }} onChange={this.calculatePremium.bind(this)} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>保险费(Premium)</span>}>
                    {getFieldDecorator('premium', {
                      rules: [{ required: true, message: '请填写保险费' }],
                      initialValue: '',
                    })(<InputNumber min={0} max={99999999999999} disabled style={{ width: '100%' }} placeholder="保险费=保险金额*费率，最低消费100RMB" />)}
                  </FormItem>
                </Col>
              </Row>
              <Divider style={{ marginBottom: 32 }} />
              {/* eslint-disable-next-line max-len */}
              <div><b>投保人兹声明上述所填内容属实，同意以本投保单作为订立保险合同的依据；对贵公司就货物运输险保险条款及附加条款及附加险条款（包括责任免除和投保人及被保险人义务部分）的内容及说明已经了解。</b></div>
              {/* eslint-disable-next-line max-len */}
              <div><b>I declare that above is true to the best of my knowledge and belief, and hereby agree that the application be incorporated into the policy. I have read and understand the Company’s cargo transportation insurance clauses and extensions(including the Exclusions and the applicant’s or insured’s Obligations).</b></div>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>投保人公司名称</span>}>
                    {getFieldDecorator('companyName', {
                      rules: [{ required: true, message: '请填写投保人公司名称' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>日期(Date)</span>}>
                    {getFieldDecorator('signDate', {
                      rules: [{ required: true, message: '请填写日期' }],
                      initialValue: undefined,
                    })(<DatePicker style={{ width: '100%' }} disabled={disabled}/>)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>联系地址</span>}>
                    {getFieldDecorator('address', {
                      rules: [{ required: true, message: '请填写联系地址' }],
                      initialValue: '',
                    })(<Input maxLength={100} disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>经办人</span>}>
                    {getFieldDecorator('operator', {
                      rules: [{ required: true, message: '请填写经办人' }],
                      initialValue: '',
                    })(<Input maxLength={30} disabled={disabled} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>电话</span>}>
                    {getFieldDecorator('phone', {
                      rules: [{ required: true, message: '请填写电话' }],
                      initialValue: '',
                    })(<Input maxLength={30} disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>电子邮箱</span>}>
                    {getFieldDecorator('email', {
                      rules: [{ required: true, message: '请填写电子邮箱' }],
                      initialValue: '',
                    })(<Input maxLength={30} disabled={disabled} />)}
                  </FormItem>
                </Col>
                <Col xs={24} md={12}>
                  <FormItem label={<span>联系人/电话</span>}>
                    {getFieldDecorator('linkType', {
                      rules: [{ required: true, message: '请填写联系人/电话' }],
                      initialValue: '',
                    })(<Input maxLength={30} disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col xs={24} md={12}>
                  <FormItem label={<span>正本保单寄送地址</span>}>
                    {getFieldDecorator('sendAddress', {
                      rules: [{ required: true, message: '请填写正本保单寄送地址' }],
                      initialValue: '',
                    })(<Input maxLength={500} disabled={disabled} />)}
                  </FormItem>
                </Col>
              </Row>
              <Row>
                <Col>
                  <Button loading={loading} style={{ display: disabled ? 'none' : 'inline-block' }} key="forward" type="primary" onClick={() => this.getForm()}>提交申请</Button>
                  <Button key="cancel" style={{ marginTop: 8, marginLeft: 8 }} onClick={() => this.handleResetFields()}>返回</Button>
                </Col>
              </Row>
            </Form>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Form.create<any>()(PolicyInsuranceForm);
